import React, { useState, useEffect } from "react";
import { Form, Select, Input, Button, Table, Switch, Space } from "antd";

import api from '../../../api'
const { Option } = Select;

const Group = () => {
    let [data, setData] = useState()
    const [form] = Form.useForm();
    // dom渲染后 componentDidMount
    useEffect(() => {
        getData()
    }, [])
    const getData = async () => {
        const { data: res } = await api.getGroupTable()
        console.log(res);
        res.data = res.data.filter(item => {
            return item.key = item.ProcuremenID
        })
        setData([...res.data])
    }
    const columns = [
        {
            title: "序号",
            dataIndex: "ProcuremenID",
            key: "ProcuremenID",
            align: 'center',
        },
        {
            title: "图片",
            dataIndex: "ProcuremenImg",
            key: "ProcuremenImg",
            align: 'center',
        },
        {
            title: "楼盘名称",
            dataIndex: "ProcuremenName",
            key: "ProcuremenName",
            align: 'center',
        },
        {
            title: "楼盘地址",
            dataIndex: "ProcuremenAddress",
            key: "ProcuremenAddress",
            align: 'center',
        },
        {
            title: "发起人",
            key: "ProcuremenRoot",
            dataIndex: "ProcuremenRoot",
            align: 'center',
        },
        {
            title: "起始时间",
            dataIndex: "ProcuremenTime",
            key: "ProcuremenTime",
            align: 'center',
        },
        {
            title: "团购状态",
            dataIndex: "ProcuremenStart",
            key: "ProcuremenStart",
            align: 'center',
        },

        {
            title: "状态",
            dataIndex: "status",
            key: "status",
            align: 'center',
            render: (text) => (
                <Switch
                    checkedChildren="正常"
                    unCheckedChildren="异常"
                    defaultChecked={text}
                />
            ),
        },
        {
            title: "操作",
            key: "action",
            render: (text, record) => (
                <Space size="middle">
                    <span>删除</span>
                </Space>
            ),
        },
    ];

    const onGenderChange = () => { };
    return (
        <div className="group">
            <p className="header_title">团购管理</p>
            <div className="group_main">
                <Form layout="inline" form={form}>
                    <Form.Item label="搜索">
                        <Input placeholder="团购名称" />
                    </Form.Item>
                    <Form.Item label="状态">
                        <Select placeholder="请选择" onChange={onGenderChange} allowClear>
                            <Option value="male">请选择</Option>
                            <Option value="female">开启</Option>
                            <Option value="other">关闭</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item>
                        <Select
                            placeholder="请选择省份"
                            onChange={onGenderChange}
                            allowClear
                        >
                            <Option value="male">山西省</Option>
                            <Option value="female">湖南省</Option>
                            <Option value="other">广东省</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item>
                        <Select
                            placeholder="请选择城市"
                            onChange={onGenderChange}
                            allowClear
                        >
                            <Option value="male">运城市</Option>
                            <Option value="female">怀化市</Option>
                            <Option value="other">深圳市</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item>
                        <Select
                            placeholder="请选择区县"
                            onChange={onGenderChange}
                            allowClear
                        >
                            <Option value="male">盐湖区</Option>
                            <Option value="female">耀县</Option>
                            <Option value="other">南山区</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item>
                        <Input placeholder="关键字" />
                    </Form.Item>
                    <Form.Item>
                        <Select
                            placeholder="请选择状态"
                            onChange={onGenderChange}
                            allowClear
                        >
                            <Option value="male">请选择</Option>
                            <Option value="female">开启</Option>
                            <Option value="other">关闭</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item>
                        <Button>查询</Button>
                    </Form.Item>
                </Form>
                <Table columns={columns} dataSource={data} />
            </div>
        </div>
    );
};

export default Group;